<template>
    <el-container id="main">
        <!-- <el-header> -->
            <el-row class="top"> 
                <el-col class="top-title">留言板</el-col>
                <el-col class="top-num">已有6645人在此留言</el-col>
            </el-row>
            <!-- 留言区 -->
            <el-row class="leave-message">
                <el-card class="box-card">
                    <el-row>
                        <el-col :span="4">
                            <div class="profile " >
                                <img  src="../assets/profile.png" alt="">
                            </div>
                        </el-col>
                        <el-col :span="8" class="name-box">
                            <el-input placeholder="输入你的昵称" v-model="inputData.userName" clearable></el-input>
                            <p> 在说:</p>
                        </el-col>
                    </el-row>

                    <el-row class="comment-text">
                        <el-col>
                            <el-input
                            type="textarea"
                            :autosize="{ minRows: 4, maxRows: 6}"
                            placeholder="你也来说两句吧！点击这里输入留言内容"
                            v-model="inputData.comment">
                            </el-input>
                        </el-col>
                    </el-row>

                    <el-row class="leave-message-footer">
                        <el-col :span="9" >
                            <el-input v-model="inputData.eamil" placeholder="Email内容"></el-input>
                        </el-col>
                        <el-col :span="9" :offset="1" >
                            <el-input v-model="inputData.url" placeholder="个人主页或微博网址"></el-input>
                        </el-col>
                        <el-col :span="4" :offset="1"><el-button @click="getUserData">保存</el-button></el-col>
                    </el-row>
                </el-card>
            </el-row>
            <!-- 显示留言区 -->
            <el-row class="message-item" v-for="(item,index) in MessageDataList" :key="index">
                <el-card class="box-card"  shadow="hover">
                    <el-row>
                        <el-col :span="4">
                            <div class="profile " >
                                <img  src="../assets/profile.png" alt="">
                            </div>
                        </el-col>
                        <el-col :span="8" class="name-box">
                            <p class="name-text">{{item.name}}</p>
                            <p> <span v-text="getDateYear(item.create_time)"></span>在说:</p>
                        </el-col>
                    </el-row>

                    <el-row class="comment-text">
                        <el-col>{{item.content}}</el-col>
                    </el-row>

                    <el-row class="leave-message-footer">
                        <el-col :span="8" >
                            <span class="el-icon-success">赞同({{item.agree}})</span>
                        </el-col>
                        <el-col :span="8"  >
                             <span class="el-icon-error">反对({{item.against}})</span>
                        </el-col>
                        <el-col :span="8" >
                             <span class="el-icon-chat-round">回复(0)</span>
                        </el-col>
                    </el-row>
                </el-card>
            </el-row>

            <!-- 底部分页 -->
            <el-row class="footer" >
               <el-col :span="12" :offset="6">
                    <el-pagination
                    background
                    :total="50"
                    @current-change="handleCurrentChange"
                    >
                    </el-pagination>
               </el-col>
            </el-row>
    </el-container>
</template>

<script>
import { ElMessage } from 'element-plus'
import { defineComponent, reactive,computed, ref} from 'vue'
import useGetMonth from '../hooks/userGetMonth'
import { getMessageList,saveMessage } from '../api/index'
export default defineComponent({
    name:'Message',
    setup(){
        const inputObj = {
            userName:'',
            comment:'',
            date:'',
            eamil:'',
            url:''
        }
        //拼接时间字符
        const getDateYear = computed(()=>{
            return function(dataStr){
               return useGetMonth(dataStr)
            }
        })
        const inputData = reactive(inputObj)
        let MessageDataList = reactive([])
        //获取留言数据
        getMessage(0,1,10)
        async function getMessage(cid,page,num){
            let { code,message,data } = await getMessageList(cid,page,num)
            if ( code === 200 && message === '获取成功'){
                MessageDataList.length = 0
                MessageDataList.push(...data)
            }else{
                ElMessage.error('当前暂无更多数据!');
            }
        }

        //保存用户留言的内容
        async function getUserData(){
            let { userName,comment,eamil,url } = inputData
            console.log(userName,comment,eamil,url)
            // let date = new Date().toLocaleString().replace(/\//g,'-').replace(/[上午|下午|晚上]/g,' ')
            if ( userName.trim() && comment.trim() && eamil.trim() && url.trim()){
                let { code,message } = await saveMessage(userName,comment,'广东广州',eamil,url,0)
                code === 200 && message === '评论成功' ? ElMessage.success('保存留言成功!') :       ElMessage.error('保存留言失败!')    
                getMessage(0,1,10)
            }else{
                 ElMessage.error('输入框内容不能为空!');
            }
        }
        

        //分页获取留言内容
        function handleCurrentChange(currentPage){
             getMessage(0,currentPage,10)
        }
        return {
            inputData,
            getUserData,
            MessageDataList,
            getDateYear,
            handleCurrentChange
        }
    }
})
</script>

<style lang='less' scoped>
#main{
    position: relative;
    display: flex;
    flex-flow: column;
    padding: 20px;
    transition: all 4s ease 0s;
    .top{
        margin: 20px 0px;
        text-align: center;
        .top-title{
            color: #333;
            margin: 10px 0px;
            font-weight: 900;
            font-size: 40px;
        }
        .top-num{
            font-size: 18px;
            font-weight: 600;
        }
    }

    .leave-message,.message-item{
        
        .box-card{
            width: 100%;
           
            .profile{
                width: 80px;
                height: 80px;
                
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            .name-box{
                display: flex;
                flex-flow: column;
                justify-content: center;
                .el-input{
                    border: none;
                }
                .name-text{
                    font-size: 26px;
                    color: rgba(0,0,0,0.8);
                }
                p{
                    font-size: 12px;
                    color: #888;

                }
            }

            .comment-text{
                margin: 20px 0px;
                font-size: 14px;
                color: rgba(0,0,0,0.6);
            }

            .leave-message-footer{
                text-align: center;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.4);
            }

            
        }
    }

    .message-item{
        margin: 30px 0px;
    }

    .footer{
        position: absolute;
        bottom: 10px;
        width: 90%;
    }
    
}
</style>